import React,{ useCallback, useMemo, useState } from 'react';


let Child = (props)=>{
  console.log('Child组件被执行了');
  return (<div> Child </div>)
}

Child = React.memo(Child)

const App = () => {

  const [count,setCount] = useState(100)

  const [name] = useState('小花')
  const [age] = useState(18)

  // const info = {
  //   name,
  //   age
  // }

  // useMemo 是用来缓存状态用的，只有当依赖项发生变化的时候才会重新渲染
  const info = useMemo(()=>{
    return {
      name,
      age
    }
  }, [name, age])

  return (
    <div>
      <h1>{count}</h1>

      <button onClick={()=>{
        setCount(count + 1)
      }}>加 1</button>

      <hr />

      <Child info={info} />
    </div>
  );
};

export default App;
